<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<script src="/bck/static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.div0-0 {
				width: 84px;
				height: 38px;
				line-height: 38px;
				padding: 0 18px;
				background-color: #009688;
				color: #fff;
				white-space: nowrap;
				text-align: center;
				font-size: 14px;
				border: none;
				border-radius: 2px;
				cursor: pointer;
			}
			.layui-table-cell{
			    height: 54px;
			    line-height: 54px;
			}
		</style>
	</head>
	<body>
		<div class="div0-0"><a href="/pinpaiadd.html">添加</a></div>
		<table id="tab" lay-filter="test"></table>
		<!--模板-->
		<script type="text/html" id="mod1">
			<button class="layui-btn layui-btn-warm" lay-event="remo">删除</button>
			<button class="layui-btn layui-btn-danger" lay-event="xiu">修改</button>
		</script>
		<div id="test1"></div>
		<script type="text/javascript">
			var userData; //表格数据
			layui.use(["table"], function() {
				table = layui.table;
				//表格渲染
				table.render({
					elem: "#tab", //指定渲染的容器
					id: "ttt",
					data: userData, //数据渲染-直接赋值数据
					page: true,
					
					cols: [
						[ //表头-每一行的模板
							{
								field: 'name',
								title: '品牌名称',
								align: "center",
							}, {
								field: 'logo',
								title: '品牌LOGO',
								templet: '<div><img class="img1" src="/{{d.logo}}" ></div>',
								align: "center",
							}, {
								field: 'describe',
								title: '描述',
								align: "center",
							}, {
								field: 'supplier',
								title: '供应商',
								align: "center",
							}, {
								field: '',
								title: '操作',
								toolbar: "#mod1",
								align: "center"
							}
						]
					]
				});
				//监听工具列事件
				table.on('tool(test)', function(obj) {
					var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
					var data = obj.data; //获得当前行数据
					var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
					if (layEvent == "remo") { //点击了删除
						console.log(data.uid);
						$.ajax({
							type: "post",
							url: "/pinpaidelete.php",
							data: {
								uid: data.uid
							},
							success: function(mgs) {
								obj.del(); //删除对应的行
							}
						});
					}else if(layEvent=="xiu"){
						console.log(data);
						sessionStorage.setItem("uid",data.uid);
						sessionStorage.setItem("name",data.name);
						sessionStorage.setItem("logo",data.logo);
						sessionStorage.setItem("describe",data.describe);
						sessionStorage.setItem("supplier",data.supplier);
						$(window).attr('location','/pinpaiupdate.html');
					}
				});
			});


			$(document).ready(function() {
				$("#ttjj").click(function() { //添加
					$("#tj").css("display", "block");
				});
				$("#tj_1_1_1").click(function() {
					$("#tj").css("display", "none");
				});
				$.ajax({
					type: 'get',
					url: '/pinpai.php',
					data: {
						page: 1
					},
					dataType: 'json',
					success: function(mgs) {
						userData = mgs.data;
						console.log(mgs.data);
					}
				});
			});
		</script>
	</body>
</html>
